{% block sw_custom_field_detail %}
<sw-modal
    class="sw-custom-field-detail"
    :title="modalTitle"
    @modal-close="onCancel"
>
    {% block sw_custom_field_detail_modal %}
    <sw-container
        columns="1fr 1fr"
        gap="20px"
    >
        {% block sw_custom_field_detail_modal_type %}
        <mt-select
            v-model="currentCustomField.config.customFieldType"
            :label="$tc('sw-settings-custom-field.customField.detail.labelCustomFieldType')"
            :placeholder="$tc('sw-settings-custom-field.customField.detail.placeholderCustomFieldType')"
            class="sw-custom-field-detail__modal-type"
            type="select"
            :help-text="$tc('sw-settings-custom-field.general.tooltipType')"
            :disabled="!currentCustomField._isNew || !acl.can('custom_field.editor') || undefined"
            :options="customFieldTypeOptions"
        />
        {% endblock %}

        {% block sw_custom_field_detail_modal_technical_name %}
        <mt-text-field
            v-model="currentCustomField.name"
            class="sw-custom-field-detail__technical-name"
            :label="$tc('sw-settings-custom-field.customField.detail.labelTechnicalName')"
            :help-text="$tc('sw-settings-custom-field.general.tooltipTechnicalName')"
            :disabled="!currentCustomField._isNew || !acl.can('custom_field.editor') || undefined"
            :error="currentCustomFieldNameError?.error"
        />
        {% endblock %}

        {% block sw_custom_field_detail_modal_position %}
        <mt-number-field
            v-model="currentCustomField.config.customFieldPosition"
            class="sw-custom-field-detail__modal-position"
            :help-text="$tc('sw-settings-custom-field.customField.detail.tooltipCustomFieldPosition')"
            number-type="int"
            :label="$tc('sw-settings-custom-field.customField.detail.labelCustomFieldPosition')"
            :disabled="!acl.can('custom_field.editor') || undefined"
        />
        {% endblock %}

        {% block sw_custom_field_detail_modal_allow_cart_expose %}
        <mt-switch
            v-if="isProductCustomField"
            v-model="currentCustomField.allowCartExpose"
            v-tooltip="getCartExposeTooltipConfig()"
            bordered
            :help-text="$tc('sw-settings-custom-field.customField.detail.tooltipAllowCartExpose')"
            class="sw-custom-field-detail__allow-cart-expose"
            :label="$tc('sw-settings-custom-field.customField.detail.labelAllowCartExpose')"
            :disabled="!acl.can('custom_field.editor') || disableCartExpose || undefined"
        />
        <div v-else></div>
        {% endblock %}

        {% block sw_custom_field_detail_modal_allow_customer_write %}
        <mt-switch
            v-model="currentCustomField.allowCustomerWrite"
            bordered
            :help-text="$tc('sw-settings-custom-field.customField.detail.tooltipAllowCustomerWrite')"
            class="sw-custom-field-detail__allow-customer-write"
            :label="$tc('sw-settings-custom-field.customField.detail.labelAllowCustomerWrite')"
            :disabled="!acl.can('custom_field.editor') || undefined"
        />
        {% endblock %}

        {% block sw_custom_field_detail_modal_store_api_aware %}
        <mt-switch
            v-model="currentCustomField.storeApiAware"
            bordered
            :help-text="$tc('sw-settings-custom-field.customField.detail.tooltipStoreApiAware')"
            class="sw-custom-field-detail__store-api-aware"
            :label="$tc('sw-settings-custom-field.customField.detail.labelStoreApiAware')"
            :disabled="!acl.can('custom_field.editor') || undefined"
        />
        {% endblock %}

        {% block sw_custom_field_detail_modal_snippet_info  %}
        <mt-banner class="sw-custom-field-detail__info">
            {{ $tc('sw-settings-custom-field.customField.detail.infoText', { name: currentCustomField.name }, 0) }}
        </mt-banner>
        {% endblock %}
    </sw-container>

    {% block sw_custom_field_detail_modal_render_component %}
    <div v-if="currentCustomField.config.customFieldType?.length > 0">
        <component
            :is="renderComponentName"
            :current-custom-field="currentCustomField"
            :set="set"
        />
    </div>
    {% endblock %}

    {% block sw_custom_field_detail_modal_footer %}
    <template #modal-footer>
        {% block sw_custom_field_detail_modal_footer_cancel %}
        <mt-button
            size="small"
            variant="secondary"
            @click="onCancel"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_custom_field_detail_modal_footer_save %}
        <mt-button
            class="sw-custom-field-detail__footer-save"
            variant="primary"
            size="small"
            :disabled="!canSave || !acl.can('custom_field.editor') || undefined"
            @click="onSave"
        >
            {{ labelSaveButton }}
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}
    {% endblock %}
</sw-modal>
{% endblock %}
